<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>云总线快捷入口</title>
    <link href="../content/css/quick-link.css" rel="stylesheet"/>
    <script type="text/javascript" src="../content/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="../content/js/lib/util.js"></script>
    <script type="text/javascript" src="../content/js/lib/validator.js"></script>
    <script type="text/javascript" src="../content/js/lib/ajaxfileupload.js"></script>
</head>
<body>
<div class="main-title">
    <span>云总线快捷入口</span>
</div>
<div class="layout clearfix">
    <ul class="link-wrap" id="ul-quick-link">
        <%--<li class="link-item">
            <a href=""><img src="../content/images/hns-logo_03.png" width="62" height="86" border="0" alt="">
                <h4>汉纳森云总线</h4></a>
        </li>
        <li class="link-item">
            <a href=""><img src="../content/images/sc-logo_06.png" width="90" height="50" border="0" alt="">
                <h4>思创云总线</h4></a>
        </li>--%>

    </ul>
</div>
<img src="../content/images/add-btn_11.png" width="61" height="61" border="0" alt="" class="add-btn">


<div class="pop-setting">
    <div class="setting-inner">
        <div class="table-wrap">
            <form id="quick-link-form" class="table-box">
                <table id="table-quick-link" width="100%">
                    <tr>
                        <th width="10%">公司logo</th>
                        <th width="32%">公司名称</th>
                        <th width="32%">链接</th>
                        <th width="10%">序号</th>
                        <th>操作</th>
                    </tr>
                    <%--<tr>
                        <td>
                            <div class="img-box"><img src="../content/images/hns-logo_03.png" border="0" alt=""></div>
                        </td>
                        <td>汉纳森云总线</td>
                        <td>www.hnsyun.com</td>
                        <td>1</td>
                        <td><a class="delete"></a></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="img-box insert-img">+</div>
                        </td>
                        <td><input type="text"></td>
                        <td><input type="text"></td>
                        <td><input type="text" style="width: 40px;text-align:center"></td>
                        <td><a class="delete"></a></td>
                    </tr>--%>
                </table>
                <a class="add-line">+</a>
            </form>

        </div>

        <div class="btn-box">
            <a class="confirm-btn">生成</a>
            <a class="cancel-btn">取消</a>
        </div>

    </div>

    <div class="mask"></div>
</div>
</body>
</html>

<script type="text/javascript">
    var upload, uploadCardFrontPicFile;

    $(function () {
        //@jeff@todo()
        var $quick_link_form = $("#quick-link-form");

        var cnt = 1;


        //进入添加页
        $('.add-btn').click(function () {
            cnt = 1;

            refreshEditData();

            $(".pop-setting").fadeIn();
        });

        //取消
        $(".cancel-btn").click(function () {
            $(".pop-setting").fadeOut();
        });

        //生成
        $(".confirm-btn").click(function () {
            var link_cnt = $('.tr-quick-link').length;

            if (link_cnt <= 50) {
                var result = $.validator($quick_link_form);
                if (result) {
                    var params = $quick_link_form.serialize();
//                  console.log(params);

                    $.ajaxExt({
                        url: "/baseQuickLink/saveQuickLinks.htm",
                        data: params
                    }).done(function (data) {
                        $(".pop-setting").fadeOut();

                        refreshShowData();
                    });
                }
            } else {
                alert('只允许添加50个链接！');
            }
        })

        upload = function (el) {
            console.log('jeff todo');

            if ($(el).val()) {
                var parent = el.parentNode;
                uploadCardFrontPicFile(el.id, $('img', parent).attr('id'), $('input[type="hidden"]', parent).attr('id'));
            }
        }

        //上传图片方法
        uploadCardFrontPicFile = function (fileElementId, imgId, urlInputId) {
            $.ajaxFileUpload({
                url: $.getProjectName() + "/baseQuickLink/uploadImage.htm",//需要链接到服务器地址
                secureuri: false,
                fileElementId: fileElementId,//文件选择框的id属性
                data: {//加入的文本参数
                    "uploadPath": "/files/upload/" + (new Date()).format() + "/"
                },
                dataType: 'text',   //json
                success: function (data, status) {
                    data = data.replace(/<\/*?pre[^<>]*>/, '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀
                    //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
                    if (data.substring(0, 1) == 0) {
                        $('#' + imgId).attr("src", $.getProjectName() + "/baseQuickLink/readImage.htm?uploadPath=" + data.substring(2));
                        $('#' + urlInputId).val(data.substring(2));
                    } else {
                        alert("上传图片失败！" + data.substring(2));
                    }
                },
                error: function (data, status, e) {
                    alert(data.responseText);
                }
            });
        }

        //添加一行数据
        $('.add-line').click(function () {

            var content = '<tr id="' + cnt + '" class="tr-quick-link">'
                    + '      <td>'
                    + '          <input id="myfile_' + cnt + '" type="file" name="myfiles" style="display: none;" onchange="upload(this);">'
                    + '          <input id="logo_' + cnt + '" type="hidden" name="logos">'
                    + '          <img id="img_' + cnt + '" class="img-box insert-img">'
                    + '      </td>'
                    + '      <td><input type="text" data-validator="{required:true}" name="names"></td>'
                    + '      <td><input type="text" data-validator="{required:true}" name="urls"></td>'
                    + '      <td><input type="text" data-validator="{required:true,number:true}" style="width: 40px;text-align:center" name="sequences"></td>'
                    + '      <td><a class="delete"></a></td>'
                    + '</tr>';

            $('table').append(content);

            cnt++;

            $('.delete').click(function () {
                $(this).closest('tr').remove();
            });

            $('.img-box').click(function () {
                $(':file', this.parentNode).click();
            });
        });

        //得到云总线快捷链接的信息
        var getQuickLinks = function (callback) {
            $.ajaxExt({
                url: "/baseQuickLink/getQuickLinks.htm",
                data: {}
            }).done(function (data) {
//                console.log(data);
                callback(data);
            });
        }

        //刷新显示页数据
        var refreshShowData = function () {
            getQuickLinks(function (data) {
//            alert('jeff todo 1');

                $('.li-quick-link').remove();

                if (data) {
                    $.each(data, function (n, item) {
                        var id = item.id,
                                logo = item.logo,
                                name = item.name,
                                url = item.url,
                                sequence = item.sequence;

                        var itemContent = '<li class="link-item li-quick-link">' +
                                '      <a href="' + url + '"><img id="img_show_' + n + '" src="' + logo + '" border="0" alt="">' +
                                '          <h4>' + name + '</h4></a>' +
                                '  </li>';

                        $('#ul-quick-link').append(itemContent);

                        $('#img_show_' + n).attr("src", $.getProjectName() + "/baseQuickLink/readImage.htm?uploadPath=" + logo);
                    });
                } else {
//                    $.messager.alert("提示", "暂无数据！", "info");
                }
            });

        };


        //刷新编辑页数据
        var refreshEditData = function () {
            getQuickLinks(function (data) {
//                alert('jeff todo 2');

                $('.tr-quick-link').remove();

                if (data) {
                    $.each(data, function (n, item) {
                        var id = item.id,
                                logo = item.logo,
                                name = item.name,
                                url = item.url,
                                sequence = item.sequence;

                        var itemContent = '<tr id="' + cnt + '" class="tr-quick-link">'
                                + '      <td>'
                                + '          <input id="myfile_' + cnt + '" type="file" name="myfiles" style="display: none;" onchange="upload(this);">'
                                + '          <input id="logo_' + cnt + '" type="hidden" name="logos" value="' + logo + '">'
                                + '          <img id="img_' + cnt + '" class="img-box insert-img">'
                                + '      </td>'
                                + '      <td><input type="text" data-validator="{required:true}" name="names" value="' + name + '"></td>'
                                + '      <td><input type="text" data-validator="{required:true}" name="urls" value="' + url + '"></td>'
                                + '      <td><input type="text" data-validator="{required:true,number:true}" name="sequences" style="width: 40px;text-align:center" value="' + sequence + '"></td>'
                                + '      <td><a class="delete"></a></td>'
                                + '</tr>';

                        $('#table-quick-link').append(itemContent);

                        $('#img_' + cnt).attr("src", $.getProjectName() + "/baseQuickLink/readImage.htm?uploadPath=" + logo);

                        cnt++;
                    });

                    $('.delete').click(function () {
                        $(this).closest('tr').remove();
                    });

                    $('.img-box').click(function () {
                        $(':file', this.parentNode).click();
                    });
                } else {
//                    $.messager.alert("提示", "暂无数据！", "info");
                }
            });


        };

        //------------------------------------------
        //初始化
        refreshShowData();

    });
</script>
